<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8"%>
<%@taglib prefix="mvc" uri="http://www.springframework.org/tags/form" %>
<%@taglib prefix="fmt" uri="http://www.springframework.org/tags" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>客户新建</title>
    <link rel="stylesheet" type="text/css" href="../../lib/pagination/style/pagination.css"/>
    <link rel="stylesheet" type="text/css" href="../../css/base.css"/>
    <link rel="stylesheet" type="text/css" href="../../css/news/center.css"/>
    <link rel="stylesheet" href="/lib/laydate/need/laydate.css">
    <link rel="stylesheet" href="/lib/laydate/skins/default/laydate.css">
    <script type="text/javascript" src="../../js/news/jquery-1.9.1.js"></script>
    <script src="/lib/laydate/laydate.js"></script>
    <script type="text/javascript" src="/js/base/tablePage.js"></script>
    <script src="../../js/news/page.js"></script>
    <script src="../../js/base/base.js" type="text/javascript" charset="utf-8"></script>
    <script src="../../lib/pagination/js/jquery.pagination.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="../js/sys/citys.js" type="text/javascript" charset="utf-8"></script>
    <script src="../../lib/layer/layer.js?20201106"></script>
    <script src="../../lib/laydate/laydate.js"></script>
    <style>
        * {font-family: "Microsoft Yahei" !important;}
        b{
            color: red;
        }
        .head_title{
            margin-top: 10px;
            height: 40px;
            position: relative;
        }
        .head_title .title{
            margin-left: 22px;
        }
        .head_title span{
            float: none;
            /*margin-top: 9px;*/
            font-size: 22px;
            color: #333;
            display: inline-block;
            margin-left: 10px;
            vertical-align: middle;
            margin-top: -6px;
        }
        .saveBtn{
            display: block;
            float: left;
            background: url(../img/confirm.png) no-repeat;
            border: none;
            width: 70px;
            height: 29px;
            line-height: 29px;
            margin-left: 10px;
            cursor: pointer;
        }
        .resetBtn {
            display: block;
            float: left;
            background: url(../img/news/new_filling.png) no-repeat;
            border: none;
            width: 70px;
            height: 29px;
            line-height: 29px;
            margin-left: 10px;
            cursor: pointer;
        }
        .div_Btn{
            position: absolute;
            margin: 10px auto;
            left: 43%
        }
        select{
            width: 250px;
            height: 30px;
        }
        .newTbale tr td {
            border-right: #ccc 1px solid;
            padding: 5px 30px;
            width: 110px;

        }
        td:nth-child(odd){
            text-align: center;
        }
        input[type="text"]{
            width: 250px;
            height: 30px;
        }
        .newTbale {
            width: 85%;
            margin: 0px auto;
        }
        table {
            border-collapse: collapse;
            border-spacing: 0;
            position: relative;
        }
        #ajaxforms{
            position: relative;
        }
        h1{
            margin:20px 0px 30px 126px;
            font-size: 20px;
            font-weight: bold;
            margin-bottom: 20px;
        }
    </style>
    <link rel="stylesheet" type="text/css" href="/css/commonTheme/${sessionScope.InterfaceModel}/commonTheme.css"/>
</head>
<body>
<!--head开始-->
<div class="head_title">
    <div class="title">
        <img src="/img/commonTheme/${sessionScope.InterfaceModel}/flow_run_title.png"><span >新建客户</span>
    </div>
</div>
<div id="pagediv">
    <form id="ajaxforms" action="/customer/addWorkbench">
        <h1>基本信息：</h1>
        <table class="newTbale">
            <tr>
                <td>客户名称:</td>
                <td><input type="text" name="customerName"/>&nbsp;<b>*</b></td>
                <td>客户经理:</td>
                <td><input type="text" name="customerManager"/></td>
            </tr>
            <tr>
                <td>客户状态:</td>
                <td>
                    <select name="customerStatus">
                        <option value="">选择客户状态</option>
                    </select>
                    <b>*</b>
                </td>
                <td>客户来源:</td>
                <td>
                    <select name="customerFrom" >
                        <option value="">选择客户来源</option>
                    </select>
                    <b>*</b>
                </td>
            </tr>
            <tr>
                <td>客户级别:</td>
                <td>
                    <select name="customerLevel" >
                        <option value="">请选择客户级别</option>
                    </select>
                    <b>*</b>
                </td>
                <td>客户行业:</td>
                <td>
                    <select name="customerIndustry" >
                        <option value="">选择客户行业</option>
                    </select>
                    <b>*</b>
                </td>
            </tr>
            <tr>
                <td>预计成交金额:</td>
                <td><input type="text" name="expectPrice" maxlength="10"/></td>
                <td>预计成交日期:</td>
                <td>
                    <input  name="expectTime" id="expectTime"  onclick="laydate({istime: true, format: 'YYYY-MM-DD'})"  placeholder="请输入时间"  type="text"  readonly="readonly" />
                </td>
            </tr>
            <tr>
                <td>公司地址:</td>
                <td><input type="text" name="address"/></td>
                <td>所在地区:</td>
                <td >
                    <select name="province" id="sheng" style="width: 125px">
                        <option>请选择</option>
                    </select>
                    <select name="city"  id="city" style="width: 125px">
                        <option>请选择</option>
                    </select>
                </td>
            </tr>
            <tr>
                <td>电子邮箱:</td>
                <td><input type="text" name="linkEmail" id="linkEmail"/></td>
                <td>公司网址:</td>
                <td><input type="text" name="website"/></td>
            </tr>
            <tr>
                <td>公司规模:</td>
                <td><input type="text" name="scale"/></td>
                <td>邮政编码:</td>
                <td><input type="text" name="zipCode"/></td>
            </tr>
            <tr>
                <td colspan="1">年销售额:</td>
                <td colspan="3"><input type="text" name="annualSales" maxlength="10" /></td>
            </tr>
        </table>
        <h1>联系人信息：</h1>
        <table class="newTbale">
            <tr>
                <td>联系人姓名:</td>
                <td><input type="text" name="linkmanName"/>&nbsp;<b>*</b></td>
                <td>联系人性别:</td>
                <td disabled="true">
                    <input type="radio" name="sex" checked="checked"  id="male" value="1"/>男
                    <input type="radio" name="sex"  id="woman" value="2"/>女
                </td>
            </tr>
            <tr>
                <td>联系人职务:</td>
                <td><input type="text" name="job"/></td>
                <td>联系人部门:</td>
                <td>
                    <input type="text" name="department"/>
                </td>
            </tr>
            <tr>
            <td>联系人手机:</td>
            <td><input type="text" name="mobile" maxlength="11"/></td>
                <td>联系人邮箱:</td>
                <td><input type="text" name="email" id="email"/></td>
            </tr>
            <tr>
                <td>联系人微信:</td>
                <td><input type="text" name="wechat" maxlength="11"/></td>
                <td>联系人QQ:</td>
                <td><input type="text" name="qq" maxlength="10"/></td>
            </tr>
            <tr>
                <td colspan="1">备注:</td>
                <td colspan="3"><input type="text" name="remark" /></td>
            </tr>
        </table>
        </form>
        <div class="div_Btn">
            <div class="saveBtn">
                <span  onclick="ajaxforms()" style="margin-left: 32px;">保存</span>
            </div>
            <div class="resetBtn" onclick="javascript:window.location.href='/customer/salesWorkbench';">
                <span  style="margin-left: 32px;" >返回</span>
            </div>
        </div>
</div>
</body>
<script>
    var date = new Date();
    $(function () {
        //select 根据ajax绑定数据 循环显示
        $.ajax({
            url: "/customer/selectByStatus",
            type:'get',
            dataType:"JSON",
            success:function(data){
                var str='<option value="">请选择客户状态</option>';
                for (var i=0;i<data.object.length;i++){
                    str += '<option value="'+data.object[i].codeNo+'">'+data.object[i].codeName+'</option>'
                }
                $('[name="customerStatus"]').html(str);
            }
        })
        $.ajax({
            url: "/customer/selectBySource",
            type:'get',
            dataType:"JSON",
            success:function(data){
                var str='<option value="">请选择客户来源</option>';
                for (var i=0;i<data.obj.length;i++){
                    str += '<option value="'+data.obj[i].codeNo+'">'+data.obj[i].codeName+'</option>'
                }
                $('[name="customerFrom"]').html(str);
            }
        })
        $.ajax({
            url: "/customer/selectByLevel",
            type:'get',
            dataType:"JSON",
            success:function(data){
                var str='<option value="">请选择客户级别</option>';
                for (var i=0;i<data.object.length;i++){
                    str += '<option value="'+data.object[i].codeNo+'">'+data.object[i].codeName+'</option>'
                }
                $('[name="customerLevel"]').html(str);
            }
        })
        $.ajax({
            url: "/customer/selectByIndustry",
            type:'get',
            dataType:"JSON",
            success:function(data){
                var str='<option value="">请选择客户行业</option>';
                for (var i=0;i<data.obj.length;i++){
                    str += '<option value="'+data.obj[i].codeNo+'">'+data.obj[i].codeName+'</option>'
                }
                $('[name="customerIndustry"]').html(str);
            }
        })
//        $.ajax({
//            url: "/customer/selectByType",
//            type:'get',
//            dataType:"JSON",
//            success:function(data){
//                var str='<option value="">请选择首选联系方式</option>';
//                for (var i=0;i<data.obj.length;i++){
//                    str += '<option value="'+data.obj[i].codeNo+'">'+data.obj[i].codeName+'</option>'
//                }
//                $('[name="firstContact"]').html(str);
//            }
//        })
    })
    function  ajaxforms() {
        var email=$('#email').val();
        var linkEmail=$('#linkEmail').val();
        var bo= /^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/.test(email);
        var ao= /^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/.test(linkEmail);
        if($('[name="customerName"]').val() == ''){
            layer.msg('请输入客户名称 ！',{icon:2});
        }else if($('[name="customerStatus"] option:selected').val() == ''){
            layer.msg('请选择客户状态！',{icon:2});
        }else if($('[name="customerFrom"] option:selected').val() == ''){
            layer.msg('请选择客户来源！',{icon:2});
        }else if($('[name="customerLevel"] option:selected').val() == ''){
            layer.msg('请选择客户级别！',{icon:2});
        }else if(linkEmail != ''&&ao == false){
            layer.msg('电子邮箱格式错误 ！',{icon:2});
        }else  if($('[name="linkmanName"]').val() == ''){
            layer.msg('请输入联系人姓名 ！',{icon:2});
        }else{
            $.ajax({
                url: '/customer/insertCustomer',
                type: 'post',
                dataType: 'json',
                data: $('#ajaxforms').serialize(),
//                +'&sex='+$('input[name=sex]:checked').val()
                success: function (data) {
                    if(data.flag){
                        layer.msg('保存成功！',{icon:1},function () {
                            window.close();
                            window.location.href='/customer/salesWorkbench'
                        });/*添加成功*/
                    }else{
                        layer.msg('保存失败！',{icon:2});/*添加失败*/
                    }
                },
                error: function (data) {
                    layer.msg('保存失败！',{icon:2});/*添加失败*/
                }
            })
        }
    }
    $(function () {
        var duanxin='';
        var flag=0;
        var sheng='<option value="">请选择</option>';
        for(var i=0;i<json.provinces.length;i++){
            sheng+='<option value="'+json.provinces[i].name+'">'+json.provinces[i].name+'</option>'
        }
        $('#sheng').html(sheng);
        $('#sheng').change(function () {
            var prov=$(this).val();
            var citys='<option value="">请选择</option>';
            for(var i=0;i<json.provinces.length;i++){
                if (json.provinces[i].name==prov){
                    if(json.provinces[i].citys!=''&&json.provinces[i].citys!=undefined){
                        for(var j=0;j<json.provinces[i].citys.length;j++){
                            citys+='<option value="'+json.provinces[i].citys[j]+'">'+json.provinces[i].citys[j]+'</option>'
                        }
                    }
                }
            }
            $('#city').html(citys);
        })
    })
</script>

</html>
